<template>
  <div class="search-container">
    <!-- head return-->
    <van-nav-bar title="搜索商品" style="background: #ededed">
      <template #left>
        <van-icon name="arrow-left" size="24" color="black" @click="$router.push({ name: 'goods' })" />
      </template>
    </van-nav-bar>

    <div class="search-input">
      <van-cell-group>
        <van-field v-model="keyword" placeholder="搜索" ref="search" />
      </van-cell-group>
    </div>

    <div class="search-box">
      <div class="search-content" v-if="showResult">
        <div v-for="item in searchResult" :key="item.id">
          <van-card
            :price="item.discount_amount > 0 ? item.price - item.discount_amount + '.00' : item.price + '.00'"
            :desc="$t('h.menuPage.stock') + item.stock"
            :title="item.name"
            :tag="item.discount_amount > 0 ? $t('h.menuPage.discount') : ''"
            currency="$"
            @click="selectGoods(item)"
            :thumb="item.image_thumbnail_cdn ? item.image_thumbnail_cdn : localImg"
            :style="{ opacity: item.stock <= 0 ? '0.6' : '' }"
          >
            <template #tags>
              <span class="old-price" v-show="item.discount_amount > 0">${{ item.price }}</span>
              <Count :goodsItem="item" :combo="item.id === comboData.id ? comboData : null"></Count>
            </template>
          </van-card>
        </div>
      </div>
      <van-empty image="search" description="搜索结果" v-if="!showResult" />
    </div>

    <Cart></Cart>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Search',
  data() {
    return {
      keyword: '',
      showResult: false,
      localImg: 'static/img/mxbc/Ice_Cream/Purple_Potato_Latte.jpeg',
      comboData: {} // 加入购物车的套餐数据
    }
  },
  mounted() {
    this.$refs.search.focus()
  },
  computed: {
    ...mapState({
      initGoodsList: state => state.home.shopsGoods
    }),
    // search result
    searchResult() {
      var list = this.initGoodsList
      var val = this.keyword
      var arr = []
      var resList = []
      if (!list.length) return
      list.forEach((item, i) => {
        var flag = item.name.toLowerCase().indexOf(val.toLowerCase())
        if (flag !== -1 && val !== '') {
          arr.push({
            num: flag,
            index: i
          })
        }
      })
      arr.sort((str1, str2) => {
        return str1.num - str2.num
      })
      arr.forEach(str => {
        resList.push(list[str.index])
      })
      return resList
    }
  },
  watch: {
    // 监听路由携带的选择的套餐数据
    $route: {
      handler({ params }) {
        // console.log(params)
        if (params.id) return (this.comboData = params)
      }
    },
    // 监听搜索结果，是否显示
    searchResult(list) {
      if (list.length !== 0) return (this.showResult = true)
      this.showResult = false
    }
  },
  methods: {
    // view current goods detail
    selectGoods(item) {
      if (item.stock < 1) return this.$msg.warning('该商品已售罄')
      this.$router.push({ name: 'detail', query: { id: item.id, source: 2 } })
    }
  }
}
</script>

<style lang="less" scoped>
.search-container {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: 640px;
  background-color: #ededed;
}

.van-nav-bar {
  position: fixed;
  width: 100%;
  max-width: 640px;
  z-index: 3;
}

.search-input {
  position: fixed;
  overflow: hidden;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 48px;
  z-index: 1;
  top: 46px;
  background-color: #ededed;
  .van-cell-group {
    width: 97%;
    height: 42px;
    border-radius: 9px;
    padding: 3px 30px;
    .van-cell {
      padding: 0;
      height: 100%;
      /deep/ .van-field__body {
        height: 100%;
        .van-field__control {
          height: 100%;
          font-size: 1.2em;
        }
      }
    }
  }
}
.search-box {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  top: 46px;
  padding-bottom: 96px;
  .search-content {
    position: relative;
    overflow: hidden;
    width: 97%;
    height: 100%;
    top: 42px;
    margin-top: 0.45em;
    border-radius: 9px;
  }
  .van-empty {
    position: relative;
    top: 30px;
  }
}
</style>
